<template>
  <div>

    <div class="offer"
         v-for="(items,indexs) in arrs"
         :key="indexs">
      <div class="img">

        <img :src='"https://elm.cangdu.org/img/"+arrs[indexs][0]'
             alt="">
      </div>
      <div class="text">
        <div @click="text(indexs)"
             class="text1">
          <div class="text1_1">
            <div class="text1_11">
              {{arrs[indexs][1]}}
            </div>
            <div class="text1_12">
              {{times}}
            </div>
          </div>
          <div class="text1_2">等待支付</div>

        </div>
        <div 
             class="text2">
          <div class="text211">
            <div class="text2_21"
                 v-for="(item,index) in arrs[indexs][3]"
                 :key="index">
              {{arrs[indexs][3][index].name}}
            </div>
          </div>

          <div class="text2_22">
            ￥{{arrs[indexs][2]}}.00
          </div>
        </div>
        <div class="text3">
          <div @click="aga"
               class="text3_31">
            再来一单
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      time: '',
      times: localStorage.getItem('times'),
      arrs: ''
    }
  },

  created () {
    var arrs = this.$store.state.apple;
    this.arrs = arrs
   // console.log(arrs)
  },

  methods: {
    aga () {
      this.$router.push({ name: 'Shopinfor' })
    },
    text (indexs) {
      localStorage.setItem('apple',JSON.stringify(this.arrs[indexs]))
      // console.log('//////////////////')
      // console.log(this.arrs[indexs])
      // console.log('//////////////////')
      this.$router.push({ name: 'Indent_infor' })
    }
  }
}
</script>

<style>
.text211 {
  width: 30px;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text211 {
  display: flex;
}
.text3_31 {
  font-size: 14px;
  text-align: center;
  border-radius: 3px;
  box-sizing: border-box;
  color: #3190e8;
  border: 1px solid #3190e8;
  width: 68px;
  height: 24px;
}
.text2_22 {
  color: #f60;
  font-weight: 500;
  font-size: 20px;
}
.text1_11 {
  width: 100%;
  color: #333;
  font-weight: 600;
  font-size: 18px;
}
.text1_12 {
  color: #999;
  font-size: 14px;
}
.text3 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 46px;
  align-items: center;
  /* border-bottom: .025rem solid #f5f5f5; */
  margin-left: 10px;
}
.text1,
.text2 {
  display: flex;
  width: 100%;
  height: 51.75px;
  align-items: center;
  border-bottom: 0.025rem solid #f5f5f5;
  justify-content: space-between;
  margin-left: 10px;
}
.text {
  width: 100%;
}
.offer {
  display: flex;
  width: 100%;
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
  background-color: white;
  margin-top: 15px;
}
.img img {
  width: 51.75px;
  height: 51.75px;
}
body {
  background-color: #f5f5f5;
}
</style>